<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>刘哲的个人简历</title>
  <link rel="stylesheet" href="./src/css/swiper.min.css">
  <link rel="stylesheet" href="./src/js/loading.css">
  <link rel="stylesheet" href="./src/css/style.css">
  <link rel="stylesheet" href="./src/css/skills.css">
  <script src="./src/js/Tween.js"></script>
  <script src="./src/js/swiper.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js"></script>
  <script src="//at.alicdn.com/t/font_1225673_mwco0tevz2.js"></script>
</head>
<body>
<div class="loading-wrap active" id="loadingWrap">
  <div class="loading">
    <div class="loader-inner">
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
    </div>
  </div>
</div>
<header class="top-nav-bar" id="siteHead">
  <div class="header-inner clearfix">
    <a href="javascript:void(0);" class="logo" title="logo">
      <span class="rs">lz</span>
      <span class="card">resume</span>
    </a>
    <nav class="triggerNav">
      <ul class="clearfix">
        <li><a class="anchor" href="#about">关于</a></li>
        <li>
          <a class="anchor" class="triggerMenu" href="#skills">技能</a>
          <ol class="subMenu">
            <li><a href="javascript:void (0)">JavaScript</a></li>
            <li><a href="javascript:void (0)">Vue</a></li>
            <li><a href="javascript:void (0)">小程序</a></li>
          </ol>
        </li>
        <li><a class="anchor" href="#works">作品</a></li>
        <li><a class="anchor" href="#leaveMessage">留言</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="banner">
  <div class="mask"></div>
</div>
<main data-x id="about">
  <div class="main-content max-content">
    <div class="content-inner clearfix">
      <div class="user-avator"></div>
      <div class="user-profile">
        <span class="welcome">hello</span>
        <h1>刘哲</h1>
        <p>前端开发工程师</p>
        <hr>
        <dl class="clearfix">
          <dt>年龄</dt>
          <dd>24</dd>
          <dt>所在地</dt>
          <dd>郑州</dd>
          <dt>邮箱</dt>
          <dd>liuzhexx@foxmail.com</dd>
          <dt>微信</dt>
          <dd>llllzzzz1210</dd>
        </dl>
      </div>
    </div>
    <div class="main-footer">
      <ul class="clearfix">
        <li>
          <a href="http://blog.aiminn.top" target="_blank">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-blog"></use>
            </svg>
          </a>
        </li>
        <li>
          <a href="https://www.jianshu.com/u/19f0915e2a49" target="_blank">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jianshu"></use>
            </svg>
          </a>
        </li>
        <li>
          <a href="//github.com/liuzheGit" target="_blank">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-github"></use>
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </div>
</main>
<section class="download-section">
  <a href="./src/pdf/resume.pdf" download>下载PDF简历</a>
</section>
<section class="profile-info">
  <p>刘哲：前端工程师</p>
  <p>技能：div+css页面布局、CSS3动画、原生JavaScript、Vue、小程序</p>
</section>
<section data-x class="max-content skills" id="skills">
  <h2>技能</h2>
  <section class="s-skill-cube-wrapper">
    <ul>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show">
            <img src="./src/img/skills/jquery.png" alt="">
          </div>
          <div class="s-skill-cube-hide" style="background:#0769ad;color:#fff;">
            <h2>jQuery</h2>
            <p>熟悉jQuery的常用属性和方法，能够封装自己的jQuery。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show">
            <img src="./src/img/skills/html5.jpg" alt=""></div>
          <div class="s-skill-cube-hide" style="background:#fff;color:#000;">
            <h2 style="text-shadow:.1rem .1rem .1rem #fff;">HTML5</h2>
            <p>了解HTML5中的新标签，熟悉使用canvas、audio等新标签。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/css3.jpg" alt=""></div>
          <div class="s-skill-cube-hide" style="background:rgb(246,246,246);color:#000;">
            <h2 style="text-shadow:.1rem .1rem .1rem #fff;">CSS3</h2>
            <p>熟悉CSS3新属性，会用3D动画打造酷炫的页面交互。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/es6.jpg" alt=""></div>
          <div class="s-skill-cube-hide" style="background:rgb(240,219,78);color:#fff;">
            <h2>ES6</h2>
            <p style="color:#000;">基础扎实，熟悉原生JS和ES6新语法，理解原型、作用域和this。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/bootstrap.png" alt=""></div>
          <div class="s-skill-cube-hide" style="background:#758a99;color:#fff;">
            <h2>BootStrap</h2>
            <p>熟练使用BootStrap设计响应式页面，阅读过部分源码。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/xiaochengxu.jpg" alt=""></div>
          <div class="s-skill-cube-hide" style="background:rgb(170,239,133);color:#000;">
            <h2 style="text-shadow:.1rem .1rem .1rem #fff;">微信小程序</h2>
            <p style="color:#000;">熟悉小程序开发，理解数据驱动的核心思想，完整阅读过API。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/vue.png" alt=""></div>
          <div class="s-skill-cube-hide" style="background:#808080;color:#fff;">
            <h2>Vue</h2>
            <p>熟悉Vue全家桶</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/git.png" alt=""></div>
          <div class="s-skill-cube-hide" style="background:#f2be45;color:#fff;">
            <h2>Git</h2>
            <p style="color:#000;">程序员必备利器！熟悉并经常使用Git管理代码！</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/node.png" alt=""></div>
          <div class="s-skill-cube-hide" style="background:#333;color:#fff;">
            <h2>Node.js</h2>
            <p>了解Node.js语法及Express框架，能够快速搭建服务器。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/webpack.png" alt=""></div>
          <div class="s-skill-cube-hide" style="background:#2b3a42;color:#fff;">
            <h2>Webpack</h2>
            <p>熟悉Webpack的相关配置及操作步骤。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/gulp.png" alt=""></div>
          <div class="s-skill-cube-hide" style="background:#cf4646;color:#fff;">
            <h2>gulp</h2>
            <p>熟悉gulp的常见插件及配置。</p>
          </div>
        </div>
      </li>
      <li class="s-skill-cube-li">
        <div class="s-skill-cube">
          <div class="s-skill-cube-show"><img src="./src/img/skills/react.png" alt=""></div>
          <div class="s-skill-cube-hide" style="background:#282c34;color:#fff;">
            <h2>React</h2>
            <p>了解React的基本语法，目前正在进一步学习中。</p>
          </div>
        </div>
      </li>
    </ul>
  </section>
</section>
<section data-x class="max-content portfolio" id="works">
  <h2>作品集</h2>
  <div class="mySlider">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <img class="swiper-slide" src="./src/img/nav-work.jpg">
        <img class="swiper-slide" src="./src/img/canvas-work.jpg">
        <img class="swiper-slide" src="./src/img/1.png">
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</section>
<section data-x id="leaveMessage" class="max-content leaveMessage">
  <h2>留言板</h2>
  <div class="message-wrap">
    <ul class="message-ul">
    </ul>
  </div>
  <div class="form-wrap">
    <form id="message-form">
      <label>
        昵称:
        <input type="text" name="username" required>
      </label>
      <label>
        留言:
        <textarea name="content" class="form-content" required></textarea>
      </label>
      <button id="submit-button" type="submit" class="submit-button">提交</button>
    </form>
  </div>
</section>
<footer>&copy;made by liuzhe</footer>
<script src="./src/js/base/View.js"></script>
<script src="./src/js/base/Model.js"></script>
<script src="./src/js/base/Controller.js"></script>
<script src="./src/js/init-swiper.js"></script>
<script src="./src/js/init-loading.js"></script>
<script src="./src/js/sticky-topbar.js"></script>
<script src="./src/js/smoothly-navigation.js"></script>
<script src="./src/js/trigger-topbar.js"></script>
<script src="./src/js/auto-slide-up.js"></script>
<script src="./src/js/message.js"></script>
<script src="./src/js/skills.js"></script>
</body>
</html>